import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export function useObserver (apiFn) {
  const target = ref(null)

  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      // isIntersecting  当元素标签在视口显示时 为true 反则为 false
      console.log(isIntersecting)
      if (isIntersecting) {
        apiFn()
        stop()
      }
    },
    {
      //   threshold  表示视口到达什么地方开始执行 0 - 1 直接 1表示整个内容全部都到视口中才执行 0 最小
      threshold: 0.1
    }
  )
  return { target }
}
